---
title: Buttons
description: Explore a curated collection of button components built with Tailwind CSS v4. Discover modern, responsive, and customizable buttons for marketing websites, optimized for performance and accessibility.
category: marketing
emoji: 👆
slug: buttons
wrapper: h-[200px]
terms:
  - action
  - cta
components:
  - { title: 'Base, solid and bordered' }
  - { title: 'Base with icon, solid and bordered' }
  - { title: 'Gradient border, rounded and pill' }
  - { title: 'Icon, solid and bordered' }
  - { title: 'Drop shadow, hide shadow and show shadow on hover' }
  - { title: 'Base with icon on hover, solid, bordered and icon left/right' }
  - { title: 'Base with shadow and expand on hover, solid and bordered' }
  - { title: 'Base with rotate and expand on hover, solid, outline and rotate
        left/right' }
  - { title: 'Artistic with offset background, background moves in and out on hover' }
  - { title: 'Highlighted border which expands on hover, left, right, bottom and left' }
  - { title: 'Large with emphasized icon, solid and bordered' }
  - { title: 'Reveal hidden static border on hover, solid and bordered' }
---

import CollectionHeader from '../../../components/CollectionHeader.astro'

<CollectionHeader>
  # Button Components

  <p>{frontmatter.description}</p>
</CollectionHeader>
